<!-- 历史记录 -->
<template>
	<container
		class="history"
		:isNoData="isNoData"
		:isLoading="loading"
		@btnClick="nodataBtnClick"
		:nodata-option="{
			type: 'hasbtn',
			icon: '/static/liulanjilu.png',
			iconW: 268,
			iconH: 354,
			iconBottom: '80rpx',
			text: '您还没有浏览记录',
			btnText: '去浏览'
		}"
	>
		<view class="tools"><view class="clear" @click="clearOpen">清空记录</view></view>
		<view class="content">
			<view class="item" :key="index" v-for="(item, index) in histroyList">
				<view class="date">{{ item.browseTime }}</view>
				<view class="good-list">
					<navigator
						class="good-item"
						:url="'/pages/goods/goods?id=' + goodItem.commodityId + '&name=' + goodItem.commodityName"
						hover-class="none"
						:key="goodItem.commodityId"
						v-for="(goodItem, goodIndex) in item.jpBrowseLogVOS"
					>
						<goods-item
							type="cross"
							:name-size="36"
							:name-row-num="2"
							:img="imgHost + goodItem.commodityPic"
							:img-width="'150rpx'"
							:img-height="'200rpx'"
							:price="goodItem.sellPrice"
							:name="goodItem.commodityName"
						></goods-item>
					</navigator>
				</view>
			</view>
		</view>
		<uni-popup ref="removePopup" type="center">
			<uni-popup-dialog
				mode="base"
				title="清空历史"
				content="确定清空历史吗?"
				:duration="2000"
				:before-close="true"
				@close="clearClose"
				@confirm="clearCheckGoodHistroy"
			></uni-popup-dialog>
		</uni-popup>
	</container>
</template>

<script>
import container from '@/components/container/container.vue';
import goodsItem from '@/components/goods-item/goods-item.vue';
export default {
	components: {
		container,
		goodsItem
	},
	data() {
		return {
			loading: false,
			imgHost: this.$imgHost,
			histroyList: [
				// {
				// 	browseTime: "2021-01-09",
				// 	jpBrowseLogVOS:[
				// 		commodityId: 8
				// 		commodityName: "十万个为什么 上册"
				// 		commodityPic: "/profile/upload/afb37c4f-68ae-4411-9c47-b47a5353aa4d.jpg"
				// 		sellPrice: 100
				// 	]
				// },
			]
		};
	},
	computed: {
		isNoData() {
			return this.histroyList.length < 1;
		}
	},
	methods: {
		nodataBtnClick() {
			uni.switchTab({
				url: '/pages/main/home'
			});
		},
		clearCheckGoodHistroy(done) {
			this.$store.dispatch('clearGoodHistroy').then(res => {
				console.log('获取商品浏览记录', res);
				let data = res.data;
				this.histroyList = [];
			});
			done();
		},
		getCheckGoodHistroy() {
			return this.$store.dispatch('getCheckGoodHistroy').then(res => {
				console.log('获取商品浏览记录', res);
				let data = res.data;
				this.histroyList = data.rows;
			});
		},

		clearOpen() {
			// 清楚历史 弹出
			this.$refs.removePopup.open();
			console.log('打开窗口');
		},
		clearClose(done) {
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
			console.log('关闭');
			done();
		},

		init() {
			this.loading = true;
			this.getCheckGoodHistroy()
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
		}
	},
	onLoad() {
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.history {
	width: 100%;
	height: 100%;

	.tools {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx 20rpx;

		.clear {
			font-size: 30rpx;
			color: #ff6106;
		}
	}
	.content {
		width: 100%;
		height: 100%;
		// flex: 1;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding: 0rpx 20rpx 20rpx 20rpx;

		.item {
			// padding: 20rpx;
			background-color: #fff;
			border-radius: 4px;
			.date {
				font-size: 30rpx;
				padding: 10rpx 20rpx;
				border-bottom: 2rpx solid #efeff0;
				color: #46494d;
			}
			.good-list {
				// padding: 0rpx 20rpx;
				.good-item {
					padding: 20rpx 20rpx;
				}
				.good-item:nth-last-child(n + 2) {
					border-bottom: 2rpx solid #efeff0;
				}
			}
		}
		.item:nth-last-child(n + 2) {
			margin-bottom: 20rpx;
		}
	}
}
</style>
